<template>
	<div class="widget-camera flex flex-wrap" :class="[direction,{'flex-reverse':direction==='right'}]">
		<div class="widget-camera-block relative pointer hover-border-active flex-noshrink" :class="{active:selected&&selected.id===camera.id}" :title="camera.label" :style="{width:imgWidth,height:imgHeight}" v-for="camera in list"
			:key="camera.id" @click.prevent.stop="$emit('click',camera)">
			<player-camera :controls="controls" class="black-bg" style="width:100%;height:100%" :camera-id="camera.id" />
			<slot name="ui" :camera="camera" />
			<div class="handler no-event-parent fullscreen absolute position-lt">
				<slot name="handler" :camera="camera" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "WidgetCamera",
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		selected: {
			type: Object,
			default: () => {
				return {};
			}
		},
		controls: {
			type: Boolean,
			default: false
		},
		direction: {
			type: String,
			default: "left"
		},
		imgWidth: {
			type: String,
			default: "400px"
		},
		imgHeight: {
			type: String,
			default: "300px"
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/styles/animations/focus.scss";
.widget-camera {
	.widget-camera-block {
		margin-bottom: 8px;
		&:hover .handler {
			opacity: 1;
		}
		.handler {
			opacity: 0;
			transition: opacity 0.25s;
		}
		&.active {
			@extend .focus-shadow;
		}
	}
	&.left .widget-camera-block {
		margin-right: 8px;
	}
	&.right .widget-camera-block {
		margin-left: 8px;
	}
}
</style>